new Vue({
  el: '#app',
  data: {
    productData: [
      {
        id: 1001,
        imgUrl: "./imgs/apple.png",
        title: "苹果",
        titleEn: "Apple",
        price: 2.99,
      },
      {
        id: 1002,
        imgUrl: "./imgs/beer.png",
        title: "啤酒",
        titleEn: "Beer",
        price: 14.99,
      },
      {
        id: 1003,
        imgUrl: "./imgs/milk.png",
        title: "牛奶",
        titleEn: "Milk",
        price: 4.99,
      },
      {
        id: 1004,
        imgUrl: "./imgs/doughnut.png",
        title: "甜甜圈",
        titleEn: "Doughnut",
        price: 19.99,
      },
      {
        id: 1005,
        imgUrl: "./imgs/bread.png",
        title: "面包",
        titleEn: "Bread",
        price: 3.99,
      },
      {
        id: 1006,
        imgUrl: "./imgs/aubergine.png",
        title: "茄子",
        titleEn: "Aubergine",
        price: 3.49,
      },
      {
        id: 1007,
        imgUrl: "./imgs/lettuce.png",
        title: "生菜",
        titleEn: "Lettuce",
        price: 2.99,
      },
      {
        id: 1008,
        imgUrl: "./imgs/flour.png",
        title: "谷物",
        titleEn: "Flour",
        price: 17.99,
      },
    ],
    cartList:[]
  },
  components: {
    productList: {
      template: `      
      <ul id="product-list">
        <li v-for="item in list" :key="item.id">
          <div class="img-box"> <img :src="item.imgUrl" alt=""></div>
          <h4>{{item.title}}</h4>
          <h5>{{item.titleEn}}</h5>
          <h6>¥{{item.price}}</h6>
          <button  @click="addToCart(item)" class="btn">加入购物车</button>
        </li>
      </ul>`,
      props: ['list'],
      data() {
        return {
          cartList: []
        }
      },
      methods: {
        addToCart(product) {
          this.cartList.push(product);
          this.$emit('refresh',this.cartList)
        }
      }
    }
  }
})